<!-- 合伙人列表 -->
<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryParamsRef"
      :inline="true"
      class="globalSerchFormStyle"
      label-width="90px"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="合伙人名称" prop="nickName" size="small">
            <el-select
              style="width: 180px"
              v-model="queryParams.nickName"
              :clearable="true"
              filterable
              placeholder="请选择合伙人名称"
            >
              <el-option
                v-for="item in sonCardTableData"
                :key="item.userId"
                :value="item.nickName"
                :label="item.nickName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="联系电话" prop="phonenumber">
            <el-input
              v-model="queryParams.phonenumber"
              placeholder="请输入联系电话"
              clearable
              size="small"
              style="width: 190px"
            />
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="合伙人状态" prop="status" size="small">
            <el-select
              style="width: 180px"
              v-model="queryParams.status"
              :clearable="true"
              filterable
              placeholder="请选择合伙人状态"
            >
              <el-option label="启用" value="0"></el-option>
              <el-option label="停用" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="global_el_rowStyle" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="getList"
          size="mini"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-refresh"
          @click="resetQuery"
          size="mini"
          plain
          >重置</el-button
        >
      </el-col>

      <el-col :span="1.5">
        <el-button @click="addSonCard" size="mini" plain>
          新增合伙人
        </el-button>
      </el-col>

      <!-- <el-col :span="1.5">
        <el-button size="mini" plain @click="handleExport"> 导出 </el-button>
      </el-col> -->
    </el-row>

    <el-table
      :data="sonCardTableData2"
      style="width: 100%"
      v-loading="loading"
      border
    >
      <el-table-column type="index" label="序号" align="left" width="60">
      </el-table-column>

      <el-table-column prop="nickName" label="合伙人名称"> </el-table-column>
      <el-table-column prop="partnerName" label="联系人"> </el-table-column>
      <el-table-column prop="phonenumber" label="联系电话/登录账号">
      </el-table-column>
      <el-table-column prop="subNum" label="下属油企数量"> </el-table-column>
      <el-table-column prop="status" label="合伙人状态">
        <template slot-scope="scope">
          {{ scope.row.status == "0" ? "启用" : "" }}
          {{ scope.row.status == "1" ? "停用" : "" }}
        </template>
      </el-table-column>

      <el-table-column fixed="right" prop="operation" label="操作" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 新增修改合伙人 -->
    <PartnersListAdd
      :addSonCardDialog.sync="addSonCardDialog"
      :partnersIs="partnersIs"
      :partnersObj="partnersObj"
    ></PartnersListAdd>
  </div>
</template>
<script>
import { listCooperator, exportCooperatorApi } from "@/api/dept/partnersList";
import PartnersListAdd from "./partnersListAdd.vue";
import { cloneDeep } from "lodash";
export default {
  name: "PartnersList",
  components: {
    PartnersListAdd,
  },
  data() {
    return {
      total: 0,
      loading: false,
      queryParams: {
        pageSize: 10,
        pageNum: 1,
        nickName: null,
        phonenumber: null,
        status: null,
      },

      sonCardTableData: [],
      sonCardTableData2: [],
      selectInfo: {
        currentRowData: {}, // 当前选中行数据
        currentOperation: "", // 当前操作
        editOrShowSonCardDialog: false,
      },

      // 添加子卡
      addSonCardDialog: false,

      partnersObj: {},
      partnersIs: null,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 重置搜索表单
    resetQuery() {
      this.$refs.queryParamsRef.resetFields();
      this.getList();
    },

    // 点击新增
    addSonCard() {
      this.partnersObj = {};
      this.partnersIs = "add";
      this.addSonCardDialog = true;
    },

    // 获取子卡列表数据
    getList() {
      this.loading = true;
      const params = this.queryParams;
      listCooperator(params)
        .then((res) => {
          if (res && res.code === 200) {
            if (
              params.hasOwnProperty("pageSize") &&
              params.hasOwnProperty("pageNum") &&
              Object.values(params).filter(
                (value) => value !== null && value !== undefined && value !== ""
              ).length === 2
            ) {
              this.sonCardTableData2 = res.rows;
              this.sonCardTableData = res.rows;
            } else if (
              params.hasOwnProperty("pageSize") &&
              params.hasOwnProperty("pageNum") &&
              Object.values(params).some(
                (value) => value !== null && value !== undefined && value !== ""
              )
            ) {
              this.sonCardTableData2 = res.rows;
            } else {
              this.sonCardTableData2 = res.rows;
            }
          } else {
            this.sonCardTableData = [];
            this.sonCardTableData2 = [];
            this.$message.error(res.msg);
          }

          this.total = res.total;
          this.loading = false;
        })
        .catch(() => {
          this.sonCardTableData = [];
          this.sonCardTableData2 = [];
          this.loading = false;
        });
    },

    // 编辑操作
    handleEdit(row) {
      this.partnersObj = row;
      this.partnersIs = "edit";
      this.addSonCardDialog = true;
    },

    //
    handleView(row) {
      this.partnersObj = row;
      this.partnersIs = "view";
      this.addSonCardDialog = true;
    },
    // async handleExport() {
    //   let params = this.queryParams;
    //   if (params.userId) {
    //     const foundItem = this.sonCardTableData2.find(
    //       (item) => item.userId == params.userId
    //     );
    //     params["nickName"] = foundItem.nickName;
    //   }
    //   delete params.userId;
    //   const res = await exportCooperatorApi(params);
    //   if (res && res.code == 200) {
    //     this.download(res && res.msg);
    //   } else {
    //     this.$message.error(res && res.msg);
    //   }
    // },
  },
  watch: {
    addSonCardDialog: {
      deep: true, // 深度监听
      handler(newVal, oldVal) {
        if (oldVal) {
          this.getList();
        }
      },
    },
  },
};
</script>
<style scoped lang="scss">
// .item_name{ 
//   ::v-deep .el-form-item__label{ 
//     width: 145px !important;
//   }
// }
</style>
